<template>
	<view class="auth-container">
		<view class="auth-header">
			<text class="auth-title">{{ isLoginMode ? '登录' : '注册' }}</text>
			<text class="auth-subtitle">{{ isLoginMode ? '欢迎回来' : '创建账户' }}</text>
		</view>

		<view class="auth-form">
			<u-form :model="formData" ref="formRef">
				<u-form-item prop="username">
					<u-input v-model="formData.username" placeholder="请输入用户名/手机号" prefix-icon="account" size="large"
						:custom-style="inputStyle" clearable />
				</u-form-item>

				<u-form-item prop="password">
					<u-input v-model="formData.password" placeholder="请输入密码" prefix-icon="lock" size="large"
						:password="true" :custom-style="inputStyle" clearable />
				</u-form-item>

				<u-form-item v-if="!isLoginMode" prop="confirmPassword">
					<u-input v-model="formData.confirmPassword" placeholder="请确认密码" prefix-icon="lock" size="large"
						:password="true" :custom-style="inputStyle" clearable />
				</u-form-item>
			</u-form>

			<view v-if="isLoginMode" class="login-options">
				<view class="remember-forgot">
					<u-checkbox-group v-model="checkboxValues">
						<u-checkbox label="记住我" @change="handleRememberChange"></u-checkbox>
					</u-checkbox-group>
					<text class="forgot-password" @click="forgotPassword">忘记密码？</text>
				</view>
			</view>

			<u-button type="primary" size="large" :custom-style="buttonStyle" :loading="loading" @click="handleSubmit">
				{{ isLoginMode ? '登录' : '注册' }}
			</u-button>
		</view>

		<view class="auth-switch">
			<text class="switch-text">{{ isLoginMode ? '还没有账户？' : '已有账户？' }}</text>
			<text class="switch-btn" @click="toggleMode">{{ isLoginMode ? '立即注册' : '立即登录' }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		useUserStore
	} from '/stores/user.js'

	const userStore = useUserStore()

	const isLoginMode = ref(true)
	const loading = ref(false)
	const checkboxValues = ref([])
	const formRef = ref(null)
	const rememberMe = ref(false)

	const formData = reactive({
		username: '',
		password: '',
		confirmPassword: ''
	})

	const inputStyle = {
		backgroundColor: '#f8f9fa',
		borderRadius: '12rpx',
		marginBottom: '20rpx',
		border: '1rpx solid #e9ecef'
	}

	const buttonStyle = {
		borderRadius: '12rpx',
		height: '88rpx',
		marginTop: '40rpx',
		backgroundColor: '#42b983',
		border: 'none'
	}

	const toggleMode = () => {
		isLoginMode.value = !isLoginMode.value
		resetForm()
	}

	const resetForm = () => {
		formData.username = ''
		formData.password = ''
		formData.confirmPassword = ''
		checkboxValues.value = []
		rememberMe.value = false
	}

	const handleRememberChange = (val) => {
		rememberMe.value = val
	}

	const handleSubmit = async () => {
		if (!formData.username.trim()) {
			uni.showToast({
				title: '请输入用户名',
				icon: 'none'
			})
			return
		}

		if (!formData.password.trim()) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			})
			return
		}

		if (!isLoginMode.value) {
			if (!formData.confirmPassword.trim()) {
				uni.showToast({
					title: '请确认密码',
					icon: 'none'
				})
				return
			}

			if (formData.password !== formData.confirmPassword) {
				uni.showToast({
					title: '两次密码输入不一致',
					icon: 'none'
				})
				return
			}

			if (formData.password.length < 6) {
				uni.showToast({
					title: '密码长度不能少于6位',
					icon: 'none'
				})
				return
			}
		}

		loading.value = true

		try {
			if (isLoginMode.value) {
				const success = await userStore.login(
					formData.username,
					formData.password,
					rememberMe.value
				)

				if (success) {
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})

					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			} else {
				const success = await userStore.register(
					formData.username,
					formData.password
				)

				if (success) {
					uni.showToast({
						title: '注册成功，请登录',
						icon: 'success'
					})

					setTimeout(() => {
						toggleMode()
					}, 1500)
				}
			}
		} catch (err) {
			console.error(err)
			uni.showToast({
				title: err.message || (isLoginMode.value ? '登录失败' : '注册失败'),
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}

	const forgotPassword = () => {
		uni.showToast({
			title: '请联系客服重置密码',
			icon: 'none'
		})
	}
</script>

<style scoped>
	.auth-container {
		height: 100vh;
		overflow: hidden;
		height: calc(100vh - var(--window-top, 0px));
		background: linear-gradient(135deg, #42b983 0%, #4ecdc4 100%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
	}

	.auth-header {
		text-align: center;
		margin-bottom: 80rpx;
	}

	.auth-title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 20rpx;
	}

	.auth-subtitle {
		display: block;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.auth-form {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
	}

	.login-options {
		margin-top: 30rpx;
	}

	.remember-forgot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.forgot-password {
		font-size: 26rpx;
		color: #42b983;
	}

	.auth-switch {
		text-align: center;
		margin-top: 40rpx;
	}

	.switch-text {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.switch-btn {
		font-size: 26rpx;
		color: #ffffff;
		font-weight: bold;
		margin-left: 10rpx;
	}

	@media screen and (max-width: 375px) {
		.auth-container {
			padding: 40rpx 30rpx;
		}

		.auth-form {
			padding: 40rpx 30rpx;
		}
	}
</style>